<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 示例样式 -->
    <link href="https://map.sgcc.com.cn/products/js-sdk/v3/assets/css/demo.css" rel="stylesheet" />
    <title>步行路径规划服务</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .btn {
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
        }

        #panel {
            position: fixed;
            background-color: white;
            max-height: 90%;
            overflow-y: auto;
            top: 10px;
            right: 10px;
            width: 280px;
        }
    </style>
</head>

<body>
<div id="map" style="width: 100vw; height: 100vh"></div>
<div id="panel"></div>
<div class="input-card" style="width: 540px; left: 1rem">
    <h4>步行路径规划服务</h4>
    <div class="input-item">
        <input style="width: 220px" id="end" type="text" placeholder="请输入终点经纬度例:116.306, 39.879" />
        <button style="margin-left: 10px; margin-top: 5px" onclick="search()" class="btn">查询步行导航</button>
        <button style="margin-top: 5px" onclick="search2()" class="btn">查询驾车导航</button>
        <button style="margin-top: 5px" onclick="clearSearch()" class="btn">清空结果</button>
    </div>
</div>
<script src="https://map.sgcc.com.cn/maps?v=3.0.0"></script>
<!-- 示例js -->
<script src="https://map.sgcc.com.cn/products/js-sdk/v3/assets/js/jquery-1.11.1.min.js"></script>
<script src="https://map.sgcc.com.cn/products/js-sdk/v3/assets/js/demo.js"></script>
<script>

    // 获取当前页面ur1的查询部分(即问号后面的那部分)
    let queryString = window.location.search;
    // 使用URLSearchParams来解析查询字符串
    let urlParams = new URLSearchParams(queryString);
    // 获取单个参数
    let coordinate = urlParams.get('coordinate'); //返回Qwen

    console.log('coordinate' + coordinate);
    var map, walkingTask, drivingTask, geo, geoList;
    SGMap.tokenTask
        .login('e7ed3aab302c3abb81508f877600f04c', "764ec17a47b43d13894a036cee4e978e")
        .then(function () {
            SGMap.plugin("SGMap.WalkingPlusTask").then(function (res) {
                initMap();
            });
            SGMap.plugin("SGMap.GeolocationTask").then(function (res) {
                initMap();
            });
            SGMap.plugin("SGMap.DrivingPlusTask").then(function (res) {
                initMap();
            });
        });

    function initMap() {
        map = new SGMap.Map({
            // 地图绑定的DOM元素ID
            container: "map",
            // 地图样式
            style: "aegis://styles/aegis/Streets-v2",
            // 默认缩放层级
            zoom: 12,
            // 地图中心点
            center: [123.46834025292898, 41.72652465934728],
            // 地图默认字体
            localIdeographFontFamily: "Microsoft YaHei Regular"
        });
        map.on("load", inited);
    }

    function inited() {
        walkingTask = new SGMap.WalkingPlusTask({
            map: map,
            // 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
            // panel: "panel"
            // hideMarkers: true
        });
        drivingTask = new SGMap.DrivingPlusTask({
            map: map,
            // 驾车路线规划策略
            // policy: 0,
            // 默认值：base，返回基本地址信息\n当取值为：all，返回DriveStep基本信息+DriveStep详细信息
            extensions: "all",
            // 默认为0，表示可以使用轮渡，为1的时候表示不可以使用轮渡
            ferry: 0,
            // 结果列表的HTML容器id或容器元素，提供此参数后，结果列表将在此容器中进行展示。可选
            // panel: "panel",
            // 设置是否显示实时路况信息，默认设置为true。 显示绿色代表畅通，黄色代表轻微拥堵，红色代表比较拥堵，灰色表示无路况信息。
            // showTraffic: false,
        });
        var el = document.createElement("div");
        el.className = "marker";
        elMarker = new SGMap.Marker({
            element: el,
            anchor: "bottom",
        });
        geo = new SGMap.GeolocationTask();
        geo
            .getLocation()
            .then(function (data) {
                geoList = data[0]
                if(coordinate){
                    document.getElementById("end").value = coordinate
                    search()
                }
            })
            .catch(function (e) {
                console.log(e);
            });
    }
    function search() {
        if(!walkingTask){
            return;
        }
        if(!geo){
            return;
        }
        const endVal = document.getElementById("end").value
        if(!endVal){
            alert('请输入终点地址')
            return
        }
        if(!(endVal.includes(','))){
            alert('请输入经纬度并用逗号分隔,例如116.379028, 39.865042')
            return
        }
        let endArr = endVal.split(",")
        showLocation(geoList);
        walkingTask.search({
            points: [
                ...[geoList],
                ...[endArr],
            ],
            complete: function (e, res) {
                console.log(e, res);
            }
        })
    }
    function search2() {
        if(!drivingTask){
            return;
        }
        if(!geo){
            return;
        }
        const endVal = document.getElementById("end").value
        if(!endVal){
            alert('请输入终点地址')
            return
        }
        if(!(endVal.includes(','))){
            alert('请输入经纬度并用逗号分隔,例如116.379028, 39.865042')
            return
        }
        let endArr = endVal.split(",")
        drivingTask.search({
            points: [
                ...[geoList],
                ...[endArr],
            ],
            complete: function (e, res) {
                console.log(e, res);
            }
        })
    }
    function clearSearch() {
        walkingTask && walkingTask.clear();
        drivingTask && drivingTask.clear();
    }
    function showLocation(location) {
        map.flyTo({
            center: location
        })
        elMarker.setLngLat(location).addTo(map);
    }
</script>
</body>
</html>
